﻿<template>
  <div class="image-module" :style="moduleStyle">
    <div v-if="pageData.layout === 1 && renderTag">
      <div
        v-for="(item, index) in list"
        :key="item._id"
        class="image-block"
        :style="{ 'margin-top': index > 0 ? pageData.imageGutter + 'px' : 0 }"
      >
        <img
          :id="'img_' + item._id"
          class="static-image"
          :style="imgStyle"
          :src="item.image || '/images/default-img/default-gray.png'"
          @click="navigateTo(item)"
          @load="loadImage(item, index)"
          @error="imageLoadError(item, index)"
        />
        <a
          v-for="area in item.hotAreaList"
          :id="'a' + '_' + item._id + '_' + area._id"
          :key="area._id"
          class="hot-area-block"
          @click="navigateTo(area)"
        ></a>
      </div>
    </div>
    <div
      v-if="pageData.layout !== 1 && pageData.swipeVisible"
      class="image-block"
    >
      <swiper :options="swiperOption">
        <swiper-slide
          v-for="item in list"
          :key="item._id"
          :style="{ width: slideWidth }"
          :data-link="item.link"
          :delay="5000"
        >
          <div :style="swipeDivStyle">
            <img
              :key="'img_' + item._id"
              class="static-image"
              :style="imgStyle"
              :src="item.image || '/images/default-img/default-gray.png'"
            />
          </div>
        </swiper-slide>
        <div
          v-if="list.length > 1 && pageData.layout === 2"
          class="swiper-pagination"
          :style="{ bottom: pageData.shadow === 1 ? '30px' : '12px' }"
          slot="pagination"
        ></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import { Swiper as SwiperClass, Pagination, Autoplay } from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
import 'swiper/swiper-bundle.css'

SwiperClass.use([Pagination, Autoplay])
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
  name: 'ImageModule',
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    componentId: {
      type: String,
      default: ''
    },
    activityCode: {
      type: String,
      default: ''
    },
    ruleContents: {
      type: Array,
      required: false,
      default: () => []
    },
  },
  data () {
    return {
      renderTag: true,
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    moduleStyle() {
      const { layout, contentBorder } = this.pageData
      const paddingRight = [1, 2].includes(layout) ? contentBorder + 'px' : 0
      return {
        'padding-left': contentBorder + 'px',
        'padding-right': paddingRight
      }
    },
    imgStyle() {
      const { shadow, shadow_x, shadow_y, shadow_blur, shadow_spread, shadow_color } = this.pageData
      let boxShadow
      if (shadow === 0) {
        boxShadow = null
      } else {
        boxShadow = `${shadow_x}px ${shadow_y}px ${shadow_blur}px ${shadow_spread}px ${shadow_color}`
      }
      const radius = this.pageData.radius === 0 ? null : this.pageData.radius_value + 'px'
      return {
        'box-shadow': boxShadow,
        'border-radius': radius
      }
    },
    swipeDivStyle() {
      const size = this.pageData.shadow === 1 ? '15px' : '0px'
      return {
        'padding-top': size,
        'padding-bottom': size,
      }
    },
    autoPlay () {
      if (this.pageData.autoplay === 0 && this.pageData.layout !== 2) return false
      return {
        delay: 5000,
        disableOnInteraction: false,
      }
    },
    slideWidth () {
      if (this.pageData.layout === 3) return '85.33%'
      if (this.pageData.layout === 4) {
        const mapData = { 3: '40%', 4: '28%', 5: '20%', 6: '16%' }
        return mapData[this.pageData.showPicNum]
      }
      return ''
    },
    pageData () {
      const model = this.pageContent.componentList.find(
        (a) => a._id === this.componentId
      )
      return { ...model }
    },
    list () {
      let tempList = this.pageData.imageList
      if (this.ruleContents?.length > 0) {
        const hideList = this.ruleContents
          .filter((a) => !a.hit)
          .map((a) => a.elementCode)
        tempList = tempList.filter(
          (a) => !hideList.includes('elecode_' + a._id)
        )
      }
      return tempList
    },
    loop () {
      const flag = this.pageData.autoplay === 0 && [3, 4].includes(this.pageData.layout)
      return !flag
    },
    swiperOption () {
      const _this = this
      return {
        loop: this.loop,
        speed: 500,
        slidesPerView: [3, 4].includes(this.pageData.layout) ? 'auto' : 1,
        spaceBetween: this.pageData.imageGutter,
        autoplay: this.autoPlay,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet (index, className) {
            if (_this.pageData.indicator === 2) {
              return `<span class="${className} indicator-item-2"></span>`
            }
            return `<span class="${className} indicator-item"></span>`
          },
        },
        on: {
          click () {
            const link = this.clickedSlide.dataset.link
            if (!link) return
            tool.navigateTo(link)
          },
        },
      }
    }
  },
  mounted () {
    this.$sendQdas('8888110901', {
      item_name: '图片广告组件-加载成功'
    })
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    imageLoadError (item) {
      let url = item.image ? item.image : '/images/default-img/default-gray.png'
      this.renderTag = false
      setTimeout(() => {
        this.renderTag = true
      })
      this.$sendQdas('8888111901', {
        item_id: item._id,
        item_name: '图片广告组件-图片加载失败',
        extra1: url
      })
    },
    loadImage (item, index) {
      this.$sendQdas('8888110903', {
        item_id: item._id,
        item_name: '图片广告组件-图片加载成功',
        extra1: item.image,
        index: index
      })
      // 只有在layout是1时才能有热区
      setTimeout(() => {
        this.renderHotArea(item)
      }, 500)
      setTimeout(() => {
        this.renderHotArea(item)
      }, 800)
      setTimeout(() => {
        this.renderHotArea(item)
      }, 1200)
    },
    navigateTo (item) {
      this.gotoPage(item)
    },
    gotoPage (item) {
      if (!item || !item.link) return
      tool.navigateTo(item.link)
    },
    renderHotArea (item) {
      // this.list.forEach((item) => {
      const imgDom = document.getElementById('img_' + item._id)
      if (imgDom) {
        const w = imgDom.offsetWidth
        const h = imgDom.offsetHeight
        const top = imgDom.offsetTop
        const left = imgDom.offsetLeft
        item.hotAreaList.forEach((area) => {
          const _id = `a_${item._id}_${area._id}`
          const element = document.getElementById(_id)
          const text = `width:${area.w * w}px;height:${area.h * h}px;top:${top + area.y * h
          }px;left:${left + area.x * w}px;`
          element.style.cssText = text
        })
      }
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.image-module {
  position: relative;
  .image-block {
    margin-bottom: 0px;
  }
  .static-image {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hot-area-block {
    position: absolute;
    display: block;
    z-index: 1;
    background-color: transparent;
  }
  .swiper-wrapper {
    display: flex;
    align-items: center;
  }
  .indicator-item {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0.5;
    border-radius: 0;
  }
  .indicator-item.swiper-pagination-bullet-active {
    width: 8px;
    background: rgba(255, 255, 255, 1);
    border-radius: 0;
    opacity: 1;
  }
  .indicator-item-2 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0.5;
  }
  .indicator-item-2.swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
  }
  .swiper-container-horizontal
    > .swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0;
    margin-left: 4px;
  }
}
</style>
